<template>
  <el-breadcrumb :separator-icon="ArrowRight" class="breadcrumb">
    <template v-for="(item, index) in breadData" :key="item.path">
      <el-breadcrumb-item >{{item.name}}</el-breadcrumb-item>
    </template>
  </el-breadcrumb>
</template>

<script lang="ts" setup>
import {ArrowRight} from '@element-plus/icons-vue'
import {useRoute} from "vue-router";
import {computed} from "vue";

const route = useRoute()

interface BreadData {
  path: string,
  name: string,
  myself: boolean
}
const breadData = computed((): BreadData[] => {
  return route.matched.filter(item => item.path !== '').map((item, index) => {
    if (item.path) {
      return {
        path: item.path,
        name: item.meta.title,
        myself: item.path === route.fullPath
      }
    }
  }, route.fullPath)
});



</script>

<style scoped>
.breadcrumb{
  margin-bottom: 10px;
}
</style>